<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>图片展示</title>
  </head>
  <body>
    <h1>图片列表</h1>
    <div id="imageContainer"></div>

    <script>
      // 使用 fetch 替代 axios
      fetch("http://localhost:3000/imgs")
        .then((response) => {
          if (!response.ok) {
            throw new Error("网络响应出错");
          }
          return response.json();
        })
        .then((data) => {
          const images = data.images;
          const container = document.getElementById("imageContainer");

          images.forEach((image) => {
            const img = document.createElement("img");
            img.src = `http://localhost:3000${image.url}`;
            img.alt = image.name;
            img.style.width = "200px";
            img.style.margin = "10px";
            container.appendChild(img);
          });
        })
        .catch((error) => {
          console.error("获取图片失败:", error);
        });
    </script>
  </body>
</html>
